<template>
  <div class="hostel">

    <div class="do">
      <el-button v-if="user.position === 0"  style="margin-left:10px;" @click="dialogFormVisible = true">维修上报</el-button>
      <el-button v-if="user.position === 0 || user.position === 2" @click="batchDelete()">批量删除</el-button>
    </div>

    <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    stripe
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="title"
      label="维修标题">
    </el-table-column>
    <el-table-column
      prop="description"
      label="维修问题详细">
      <template #default="scope">
        <el-tooltip class="item" effect="dark" :content="scope.row.description" placement="top">
          <span>{{ String(scope.row.description).length > 10? String(scope.row.description).substring(0, 10) + '......' : scope.row.description }}</span>
        </el-tooltip>
      </template>
    </el-table-column>      
    <el-table-column
      prop="reporterName"
      label="上报人">
    </el-table-column>
    <el-table-column
      prop="reporterEmail"
      label="上报人邮箱">
      <template #default="scope">
        <el-tooltip class="item" effect="dark" :content="scope.row.reporterEmail" placement="top">
          <span>{{ String(scope.row.reporterEmail).length > 10? String(scope.row.reporterEmail).substring(0, 10) + '......' : scope.row.reporterEmail }}</span>
        </el-tooltip>
      </template>
    </el-table-column>   
    <el-table-column
      prop="upkeepName"
      label="维修人">
    </el-table-column>
    <el-table-column
      prop="upkeepEmail"
      label="维修人邮箱">
      <template #default="scope">
        <el-tooltip class="item" effect="dark" :content="scope.row.upkeepEmail" placement="top">
          <span>{{ String(scope.row.upkeepEmail).length > 10? String(scope.row.upkeepEmail).substring(0, 10) + '......' : scope.row.upkeepEmail }}</span>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column
      prop="buildAndHostelName"
      label="位置">
      <template #default="scope">
        <el-tooltip class="item" effect="dark" :content="scope.row.buildAndHostelName" placement="top">
          <span>{{ String(scope.row.buildAndHostelName).length > 10? String(scope.row.buildAndHostelName).substring(0, 10) + '......' : scope.row.buildAndHostelName }}</span>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column
      prop="status"
      label="状态"
      :filters="[{ text: '待处理', value: 0 }, { text: '处理中', value: 1 }, { text: '待支付', value: 2}, { text: '已完成', value: 3 }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
          <el-tag
          :type="scope.row.status === 0 ? 'primary' : 'success'"
          disable-transitions>{{getStatusText(scope.row.status)}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      width="180px"
      prop="createTime"
      label="上报时间">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">详细</el-button>
        <el-button
          size="mini"
          type="danger"
          v-if="user.id === scope.row.userId  || user.position === 2"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>

    <div class="block" style="margin-top: 20px; text-align: right; margin-right: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>

    <MaintenanceFormPop class="houseFormPop" @updateFormData="updateFormData" :formData="updateTableData" v-show="dialogFormVisible" :visible.sync="dialogFormVisible"></MaintenanceFormPop>
  </div>
</template>
         
<script>
import api from '@/api';
import { cloneDeep } from 'lodash';
import MaintenanceFormPop from './MaintenanceFormPop';
import { mapState,mapMutations } from "vuex"

export default {
    components: {
      MaintenanceFormPop,
    },
    computed:{
      ...mapState("login",["user"])
    },
    data() {
      return {
        currentPage: 1,
        total:100,
        pageSize:10,
        dialogFormVisible: false,
        searchData:{
          pageNow: 1,
        },
        tableData: [{
          id:'',
          title:'',
          reporterId:'',
          reporterName:'',
          reporterEmail:'',
          description: '水管坏了',
          createTime:'',
          upkeepId:'',
          upkeepName:'',
          upkeepEmail:'',
          upkeepImage:"",
          hostelId:"",
          payWay:0,
          remark:"",
          buildAndHostelName:'',
          status: 0
        }],
        selectedRow:[],
        updateTableData:{
          id:'',
          title:'',
          reporterId:'',
          reporterName:'',
          reporterEmail:'',
          upkeepEmail:'',
          reporterImage:"",
          upkeepImage:'',
          description: '',
          createTime:'',
          upkeepId:'',
          upkeepName:'',
          hostelId:"",
          prebookStartTime:'',
          prebookEndTime:'',
          buildAndHostelName:'',
          payWay:0,
          remark:"",
          status: 0
        }
      }
    },
    methods: {
      updateFormData(data){
        this.updateTableData = data;
      },
      getStatusText(sex){
        switch(sex){
            case 0 : return '待处理';
            case 1 : return '处理中';
            case 2 : return '待支付';
            case 3 : return '已完成';
            case 4 : return '已完成';
          default : return '';
          }
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.searchData.pageNow = val
        //获取房屋信息
        this.onSubmit();
      },
      handleSelectionChange(selection) {
          this.selectedRow = selection
      },
      handleEdit(index, row) {
        this.updateTableData = row;
        this.updateTableData.prebookStartTime = this.updateTableData.prebookEndTime
        this.dialogFormVisible = true;
      },
      handleDelete(index, row) {
        if(!row.status||(row.status !==3 && row.status !==4)){
          this.$message.error("该订单进行中")
          return
        }

        api.deleteUpkeep(row.id).then(res =>{
            if(res.type === 'error'){
                this.$message.error(res.message)
            }else if(res.data.code === 200){
              this.tableData.splice(index,1)
              this.$message.success('删除成功');
            }else{
              this.$message.error(res.data.message)
            }
        })
      },
      filterTag(value, row) {
        return row.sex === value;
      },
      filterTag1(value, row) {
        return row.position === value;
      },
      //批量删除
      batchDelete(){
        var deleteIds = '';
        var float = false;
        this.selectedRow.map(item =>{
          if(deleteIds === ''){
            deleteIds = item.id
          }else{
            deleteIds = deleteIds + "," + item.id
          }
          if(!item.status||(item.status !==3 && item.status !==4)){
            float = true;
          }
        })
        if(float){
          this.$message.error("存在进行中订单")
          return
        }

        if(deleteIds === ''){
          this.$message.error("请勾选删除项")
          return;
        }
        api.deleteUpkeep(deleteIds).then(res =>{
            if(res.type === 'error'){
                this.$message.error(res.message)
            }else if(res.data.code === 200){
              this.$message.success('删除成功');
              this.selectedRow.map(item =>{
                const index = this.tableData.findIndex((data) => data.id === item.id);
                this.tableData.splice(index,1)
              })
            }else{
              this.$message.error(res.data.message)
            }
        })
      },
      onSubmit() {
        //获取维修信息
        api.upkeepList(this.searchData).then(res => {
              if (res.type === 'error') {
                this.$message.error(res.message);
              } else if (res.data.code === 200) {
                let upkeepInfos = res.data.data.upkeepInfos;     
                this.tableData = upkeepInfos;
                this.total = res.data.data.total
              } else {
                this.$message.error(res.data.message);
              }
        });
      },
      // 重置
      reset(){
        this.searchData.localtion = '',
        this.searchData.userId = '',
        this.onSubmit();
      },
    },
    created () {
      this.onSubmit(); 
    }
}
</script>
<style scoped>
.hostel{
  background-color: #fff;
}
.hostel .search{
  padding: 10px;
}
.hostel .do{
  padding: 10px;
}
/* 自定义遮罩层样式 */
.hostel .houseFormPop {
  background-color: rgba(0, 0, 0, 0.5); /* 遮罩层颜色 */
  z-index: 9999; /* 设置一个较高的 z-index 使遮罩层位于最上层 */
}
</style>